<template>
  <div class="top">
    <div class="icon" @click="show=!show">
      <img src="./assets/icon.png" class="icon-img" alt="">
    </div>
    <div class="input"><span></span>{{ selectTitle }}</div>
  </div>
  <div class="mater-content" v-html="content"></div>
  <van-popup v-model:show="show" position="left" :style="{ width: '70%', height: '100%',paddingTop: '10px' }" >
    <div class="flex">
      <div class="icon" @click="show=false">
        <img src="./assets/icon.png" class="icon-img" alt="">
      </div>
      <div class="search-warp">
        <img src="./assets/search.png" class="search-icon" alt="">
        <input class="search" type="text" v-model="title" @change="searchHandle">
      </div>
    </div>
    <van-index-bar :sticky="false" ::index-list="letterList">
      <template v-for="item of indexList" :key="item.index">
        <van-index-anchor :index="item.index" />
        <van-cell :title="title.title" :style="{color: title.isSelect ? '#1989fa' : '#323232'}" v-for="title of item.dataList" @click="getDetail(title)"/>
      </template>
      <p v-if="indexList.length == 0" style="text-align: center">暂无数据</p>
    </van-index-bar>
  </van-popup>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getMaterList, getMaterDetail } from './api'
const show = ref(true)
const title = ref('')
const indexList = ref([])
const letterList = ref(['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'])
const getList = (title, isFirst=false) => {
  getMaterList({title, limit: 10000}).then(res => {
    if (res.code == 1) {
      const list = res.data.data
      for(let letter of letterList.value) {
        let arr = list.filter(item => item.first_letter == letter)
        if (arr.length > 0) {
          indexList.value.push({
            index: letter,
            dataList: arr
          })
        }
      }
      if (indexList.value.length > 0 && isFirst) {
        getDetail(indexList.value[0].dataList[0], isFirst)
      }
    }
  })
}
const selectTitle = ref('')
const content = ref('')
const getDetail = (item, isFirst = false) => {
  selectTitle.value = item.title
  indexList.value.forEach(item => {
    item.dataList.forEach((el) => el.isSelect = false)
  })
  item.isSelect = true
  getMaterDetail({id: item.id}).then(res => {
    if (!isFirst) {
      show.value = false
    }
    if (res.code == 1) {
      content.value = res.data.content
    }
  })
}
const searchHandle = () => {
  indexList.value = []
  getList(title.value)
}
onMounted(() => {
  // 禁止右键菜单
  document.oncontextmenu = function(){ return false; };
  // 禁止文字选择
  document.onselectstart = function(){ return false; };
  // 禁止复制
  document.oncopy = function(){ return false; };
  // 禁止剪切
  document.oncut = function(){ return false; };

  getList(title.value, true)
})
</script>
<style scoped>
  .top{
    display: flex;
    margin-top: 10px;
  }
  .icon-img {
    width: 20px;
    height: 20px;
    margin: 12px auto;
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 48px;
    background: #EDEDED;
    border-radius: 0 8px 8px 0;
    margin-right: 10px;
    flex-shrink: 0;
  }
  .icon,.input {
    height: 48px;
  }
  .input {
    flex: 1;
    background-color: #ECF7FF;
    margin-right: 15px;
    border-radius: 8px;
    padding: 0 15px;
    color: #0A59FB;
    font-size: 16px;
    line-height: 48px;
  }
  .input>span {
    display: inline-block;
    vertical-align: middle;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 6px;
    line-height: 48px;
    background-color: #0A59FB;
  }
  .mater-content {
    margin: 15px;
    box-shadow: 0px 1px 11px 0px rgba(4,0,0,0.29);
    border-radius: 10px;
    height: 200px;
  }
  .flex {
    display: flex;

  }
  .flex .search {
    flex: 1;
    height: 48px;
    line-height: 48px;
    border-color: #A6A6A6;
    border-radius: 7px;
    border-width: 1px;
    padding-left: 50px;
    box-sizing: border-box;
    width: calc(100% - 10px);
  }
  .search-warp {
    position: relative;
    flex: 1;
  }
  .search-icon {
    position: absolute;
    top: 16px;
    left: 20px;
    width: 16px;
    height: 16px;
  }
  .van-index-bar {
    height: calc(100% - 58px);
    overflow-y: scroll;
  }

</style>